<template>
    <div class="change-city">

        <el-card class="change-city-card">


            <!--            搜索-->
            <div class="change-city-search">
                <!--                按省份选择-->
                <div class="search-by-city">
                    <span>按省份选择: </span>
                    <!--                    省份-->
                    <el-select @change="selectProvinceEvent" class="search-select" v-model="selectProvince"
                               placeholder="省份">
                        <el-option v-for="(p,index) in provinces" :key="index" :label="p.provinceName"
                                   :value="p.regionId"/>
                    </el-select>
                    <!--                    城市-->
                    <el-select @change="selectCityEvent" class="search-select"
                               :disabled="selectProvince == ''?true:false" v-model="selectCity"
                               placeholder="城市">
                        <el-option v-for="(city,index) in selectProvince.cities" :key="index" :label="city.name"
                                   :value="city"/>
                    </el-select>
                </div>

                <!--                直接搜索-->
                <div class="search-by-name">
                    <span>直接搜索: </span>
                    <el-input class="search-input"
                              @input="searchRegionLike"
                              @blur="searchBlur"
                              v-model="text"
                              placeholder="请输入城市中文名或拼音"></el-input>

                    <!--                    搜索结果-->
                    <div class="search-content" ref="search-content" v-if="likeCity.length > 0">
                        <div class="city"
                             @click="selectCityEvent(item)"
                             v-for="(item,index) in likeCity"
                             :key="index">
                            {{item.name}}
                        </div>
                    </div>

                    <div class="search-content" ref="search-content" v-else>
                        <div class="city">
                            未找到匹配城市
                        </div>
                    </div>

                </div>
            </div>


            <!--            十个热门城市-->
            <div class="hot-city">

                <span class="change-city-text">热门城市：</span>
                <span class="hot-city-item">北京</span>
                <span class="hot-city-item">上海</span>
                <span class="hot-city-item">广州</span>
                <span class="hot-city-item">北京</span>
                <span class="hot-city-item">北京</span>
                <span class="hot-city-item">北京</span>
                <span class="hot-city-item">上海</span>
                <span class="hot-city-item">广州</span>
                <span class="hot-city-item">北京</span>
                <span class="hot-city-item">北京</span>

            </div>


            <!--            最多十个最近访问-->
            <div class="recent-city">

                <span class="change-city-text">最近访问：</span>
                <span class="recent-city-item" v-for="(city,index) in recentCity" :key="index">{{city.name}}</span>

            </div>


            <!--            按拼音首字母选择-->
            <div class="search-by-pinyin">
                <span class="change-city-text">按拼音首字母选择: </span>
                <div class="pinyin-list">
                    <span @click="goFirstChar(item)" class="pinyin-city-item" v-for="(item,index) in letters"
                          :key="index">{{item}}</span>
                </div>
            </div>


            <!--            城市列表-->
            <div class="city-box" v-for="(item,index) in cityMap" :key="index">
                <el-row>
                    <el-col :span="1">
                        <div>
                            <span class="first-char" :id="item.firstChar">{{item.firstChar}}</span>
                        </div>
                    </el-col>
                    <el-col :span="23">
                        <div class="city-list">
                            <span @click="selectCityEvent(city)"
                                  class="city-item"
                                  v-for="(city,jndex) in item.cities"
                                  :key="jndex">{{city.name}}</span>
                        </div>
                    </el-col>
                </el-row>
            </div>


        </el-card>


    </div>
</template>

<script>
    import {setItem, getItem} from "@/utils/storage"
    import {getAllRegion, searchCityByNameOrPinyin} from "@/api/common/common"

    import Constants from "@/constant"

    export default {
        name: 'ChangeCity',
        data() {
            return {
                text: "",
                selectProvince: "",
                selectCity: null,
                provinces: [],
                likeCity: [],
                cityMap: null
            };
        },
        computed: {
            letters() {
                return ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
            },
            /**
             * 最近访问的城市
             */
            recentCity() {
                let name = "RECENT_SEARCH_CITIES"
                let cities = getItem(name);
                if (!cities) {
                    return []
                }
                return cities
            }
        },
        methods: {
            /**
             * 获取所有地点
             */
            getAllRegion() {
                getAllRegion().then(res => {
                    this.provinces = res.provinces
                    this.cityMap = res.cityMap
                })
            },
            /**
             * 根据城市中文名或拼音查找城市
             */
            searchRegionLike() {
                if (this.$refs["search-content"]) {
                    this.$refs["search-content"].style.display = "block"
                }
                if (this.text.trim() !== '') {
                    searchCityByNameOrPinyin({
                        "text": this.text
                    }).then(res => {
                        this.likeCity = res.data
                    })
                } else {
                    this.likeCity = []
                }
            },
            /**
             * 选择省份
             */
            selectProvinceEvent(id) {
                this.provinces.forEach(p => {
                    if (p.regionId === id) {
                        this.selectProvince = p
                        return
                    }
                })
            },
            /**
             * 选择某个具体的城市，跳转到主页，然后查询该地区的相关数据
             */
            selectCityEvent(city) {
                /**
                 * 最多保存10个
                 */
                let name = this.$Constants.RECENT_SEARCH_CITIES
                let cities = getItem(name);
                if (!cities) {
                    cities = []
                    cities.push(city)
                    setItem(name, cities)
                } else {
                    let flag = true
                    cities.forEach(c => {
                        /**
                         * 判断之前有没有存储过
                         */
                        if (c.regionId === city.regionId) {
                            flag = false
                        }
                    })
                    if (flag) {
                        cities.push(city)
                    }
                    setItem(name, cities)
                }
                /**
                 * 设置当前访问的位置
                 */
                setItem(this.$Constants.CURRENT_CITY, city)
                this.goNewPage("/")
            },
            goFirstChar(name) {
                window.location.hash = "#" + name
            },
            /**
             * 失去焦点的时候消失,因为需要触发selectCityEvent,必须停顿一会
             */
            searchBlur() {
                let that = this
                setTimeout(() => {
                    if (that.$refs["search-content"]) {
                        that.$refs["search-content"].style.display = "none"
                    }
                }, 100)
            }
        },
        mounted() {
            this.getAllRegion()
        },
        components: {}
    }
</script>

<style scoped lang='less'>
    .change-city {
        margin-top: 5vh;

        .change-city-card {

            .hot-city {
                border-bottom: 1px solid #DCDFE6;
                margin-bottom: 20px;
                padding: 20px 0 30px 0;

                .hot-city-item {
                    color: #909399;
                    font-size: 14px;
                    margin: 0 20px;
                }
            }


            .recent-city {
                border-bottom: 1px solid #DCDFE6;
                margin-bottom: 20px;
                padding: 20px 0 30px 0;

                .recent-city-item {
                    color: #909399;
                    font-size: 14px;
                    margin: 0 20px;
                }
            }

            .city-box {
                margin-bottom: 30px;

                .first-char {
                    box-sizing: border-box;
                    vertical-align: top;
                    padding-top: 10px;
                    display: inline-block;
                    text-align: center;
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    color: #222222;
                    background: #FFD000;
                }

                .city-list {
                    display: flex;
                    flex-wrap: wrap;

                    .city-item:hover {
                        color: #303133;
                        font-weight: 700;
                    }

                    .city-item {
                        cursor: pointer;
                        color: #909399;
                        font-size: 14px;
                        height: 40px;
                        margin: 0 30px;
                    }
                }

            }

            .search-by-pinyin {
                margin-bottom: 30px;

                .pinyin-list {
                    margin-top: 20px;
                    display: flex;
                    flex-wrap: wrap;

                    .pinyin-city-item:hover {
                        color: #303133;
                        font-weight: 700;
                    }

                    .pinyin-city-item {
                        cursor: pointer;
                        color: #909399;
                        font-size: 16px;
                        margin: 0 30px 20px 0;
                    }
                }

            }

            .change-city-search {
                display: flex;
                height: 80px;

                border-bottom: 1px solid #DCDFE6;
                margin-bottom: 20px;

                > div {
                    > span {
                        margin-right: 8px;
                    }
                }

                .search-by-city {
                    .search-select {
                        margin-right: 25px;
                    }
                }

                .search-by-name {
                    margin-left: 30px;
                    position: relative;

                    .search-input {
                        width: 250px;

                    }

                    .search-content {
                        position: absolute;
                        display: none;
                        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
                        width: 250px;
                        padding: 10px;
                        background-color: white;
                        top: 50px;
                        left: 80px;
                        border-radius: 5px;
                        border: 1px solid #EBEEF5;
                        font-size: 13px;
                        max-height: 300px;
                        overflow-y: auto;

                        .city {
                            height: 20px;
                            line-height: 20px;
                            cursor: pointer;
                            color: #909399;
                        }

                        .city:hover {
                            color: #606266;
                            font-weight: 700;
                        }
                    }
                }

            }
        }
    }
</style>